<template>
  <div class="home" id="home">
    <Headbar />
    <HeadMenu ideName="home" />
    <Hungbar />
    <div :class="' swiper home-swiper swipers'+swipers.length">
      <el-carousel :interval="5000" arrow="always" height="580px">
        <el-carousel-item class="home-swiper-item cursor"

         v-if="i.resourceUrl" v-for="i in swipers"
         :style="'background-image:url('+URL.PIC+i.resourceUrl+')'"
        @click.native="routeToPath(i.target.params?i.target.params.name:'', 'new')"
         ></el-carousel-item>
      </el-carousel>
      <div class="swiper-bg">
        <img src="@/assets/images/home/swiper-bg.png">
      </div>

      <div class="home-classify" @mouseout="classifyLeftOut()">
        <div class="hung-tab-wrap cursor" @click="routeToOut(URL.oldSiteIndex, 'new')">
          <div class="hung-line"></div>
          <div class="hung-enter-text">进入推广版</div>
        </div>
        <div class="classify-left">
          <ul>
            <li class="classify-item" v-for="(item, idx) in classifys"  v-if="idx<11" :key="idx" @mouseover="classifyOver(item, idx,true)" @mouseout="classifyOut(item, idx,true)">
              <div class="category-title" >
              <span v-for="categoryTitle in item">
              <a v-if=" categoryTitle.target!=null &&  categoryTitle.target.params!=null" :href="URL.mall+'/search/product?categoryIds='+categoryTitle.target.params.categoryIds+'&categoryNames='+categoryTitle.title" target="_blank">{{ categoryTitle.title }}</a>
              <a v-else :href="URL.mall+'/search/product?kw='+categoryTitle.title" target="_blank">{{ categoryTitle.title }}</a>
            </span>
              </div>
            </li>
            <li class="classify-item" v-if="classifys.length==12" :key="11" @mouseover="classifyOver(classifys[11], 11,true)" @mouseout="classifyOut(classifys[11], 11,true)">
              <div class="category-title" >
              <span v-for="categoryTitle in classifys[11]">
              <a v-if="categoryTitle.target!=null && categoryTitle.target.params!=null" :href="URL.mall+'/search/product?categoryIds='+categoryTitle.target.params.categoryIds+'&categoryNames='+categoryTitle.title" target="_blank">{{ categoryTitle.title }}</a>
              <a v-else :href="URL.mall+'/search/product?kw='+categoryTitle.title" target="_blank">{{ categoryTitle.title }}</a>
            </span>
              </div>
            </li>
            <li v-if="classifys.length>12" class="classify-item" @mouseover="classifyOver(classifys, 12,false)" @mouseout="classifyOut(classifys, 12,false)">
              <div class="category-title" >
              <span>
                  <a>其他分类</a>
              </span>
              </div>
            </li>
          </ul>
          <div class="pop-classify" v-show="showClassify" @mouseover="classifyOver('no', classifyIndex)" @mouseout="classifyOut('no', classifyIndex)">
            <div class="pop-classify-wrap">
              <div v-for="(item, idx) in classIdx" class="pop-class-content">
                <div class="pop-title">
                  <a v-if="item.target && item.target.params!=null" :href="URL.mall+'/search/product?categoryIds='+item.target.params.categoryIds+'&categoryNames='+item.title" target="_blank">{{ item.title }}</a>
                  <a v-else :href="URL.mall+'/search/product?kw='+item.title" target="_blank">{{ item.title }}</a>
                </div>
                <div class="pop-tags">
                <span v-for="front in item.frontAppDTO">
                  <a v-if="item.target && front.target.params!=null" :href="URL.mall+'/search/product?categoryIds='+front.target.params.categoryIds+'&categoryNames='+front.title" target="_blank">{{ front.title }}</a>
                  <a v-else :href="URL.mall+'/search/product?kw='+front.title" target="_blank">{{ front.title }}</a>
                </span>
                </div>
              </div>

              <div class="indexClassifyImg">
                <div v-if="classifyIndex == 0">
                  <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs1">
                    <img :src="i.pic" alt="">
                  </div>
                </div>
                <div v-if="classifyIndex == 1">
                  <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs2">
                    <img :src="i.pic" alt="">
                  </div>
                </div>
                <div v-if="classifyIndex == 2">
                  <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs3">
                    <img :src="i.pic" alt="">
                  </div>
                </div>
                <div v-if="classifyIndex == 3">
                  <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs4">
                    <img :src="i.pic" alt="">
                  </div>
                </div>
                <div v-if="classifyIndex == 4">
                  <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs5">
                    <img :src="i.pic" alt="">
                  </div>
                </div>
                <div v-if="classifyIndex == 5">
                  <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs6">
                    <img :src="i.pic" alt="">
                  </div>
                </div>
                <div v-if="classifyIndex == 6">
                  <div @click="routeToPath(i.url, 'new')" class="indexClassifyImg-item cursor" v-for="i in indexClassifyImg.imgs7">
                    <img :src="i.pic" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="classify-pop">

        </div>
      </div>
    </div>
    <Channel />
    <Xlist />

    <!-- 精选市场 -->
    <div class="yh-layout-box" v-if="ackMarketList.length>0">
      <div class="rolls-head">
        <h3>精选市场</h3>
        <p>足不出户，在家也能逛市场  <a class="yh-layout-box-market-qh" :href="URL.mall+'/market/list'" target="_blank">更多</a></p>
      </div>
      <div>
        <div class="yh-layout-box-market" v-for="(item,index) in ackMarketList" v-if="index<4">
          <h4>{{item.marketName}}</h4>
          <div class="yh-layout-box-market-tags">
            <span :class="'yh-layout-box-market-tag tags'+(tidex%3+1)" v-for="(tag,tidex) in item.marketTags" v-if="tidex<3">{{tag}}</span>
          </div>
          <a :href="URL.mall+'/market/major?marketId='+item.marketId" target="_blank">
            <img :src="URL.PIC+item.marketImg" class="yh-layout-box-market-img">
            <figure class="market-btn">
              去逛市场
            </figure>
          </a>
          <p style="color: #255B8B;">{{item.telPhone}}</p>
          <p>{{item.marketAddress}}</p>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>

    <!--  专题活动  -->
    <div v-if="floorlist.length > 0" class="yh-layout-box motif-carousel" v-for="(item,index) in floorlist">
    <div class="rolls-head">
      <h3>{{item.shortTitle}}</h3>
      <p>{{item.title}}</p>
    </div>
    <div>
      <el-carousel v-if="item && item.length>0" trigger="click" height="200px" :autoplay="false" :arrow="count >1?'always':'never'" indicator-position="none">
        <el-carousel-item  v-for="(data,index) in item.motifPromotions" v-if="index<item.motifPromotions.length && index%2==0">
              <div class="motif-lt">
                <a :href="URL.mall+'/activity/project?motifId='+item.motifPromotions[index].motifId" target="_blank">
                  <img :src="URL.PIC+item.motifPromotions[index].image" :alt="URL.PIC+item.motifPromotions[index].shortTitle">
                </a>
              </div>
              <div class="motif-rt" v-if="item.motifPromotions[index+1] !=undefined">
                <a :href="URL.mall+'/activity/project?motifId='+item.motifPromotions[index+1].motifId" target="_blank">
                  <img :src="URL.PIC+item.motifPromotions[index+1].image" :alt="URL.PIC+item.motifPromotions[index+1].shortTitle">
                </a>
              </div>
          </el-carousel-item>
        </el-carousel>
    </div>
  </div>

    <div class="yh-layout-box">
      <div class="rolls-head">
        <h3>按品类找货</h3>
        <p>品类齐全 全行业覆盖</p>
      </div>
      <div v-for="(data,index) in list">
      <template>
        <div :class="'home-rolls rolls'+(index%3+1)">
          <div class="rolls-wrap">
            <div class="rolls-main ">
              <div class="rolls-left fl">
                <div class="rolls-title">
                  <h3>{{ data.categoryTitle.split("-")[0] }}</h3>
                  <p>{{ data.categoryTitle.split("-")[1] }}</p>
                </div>
                <div class="rolls-image">
                  <img :src="URL.PIC+data.imgUrl" :alt="data.categoryTitle">
                </div>
                <ul class="rolls-tags">
                  <li v-for="i in data.tagList">
                    <!-- <a :href="URL.mall+'/search/product?classifyId='+i.relevanceCategoryIds" target="_blank"> -->
                    <a  @click="routeToPath('/search/product?classifyId='+i.relevanceCategoryIds,'mall','new')">
                    {{ i.categoryTagName }}
                    </a>
                  </li>
                </ul>
              </div>
              <ul class="rolls-right fl">
                <li class="rolls-item" v-for="(i,index) in data.productList" v-if="index<8">
                    <!-- <a :href="URL.mall+'/product/detail?id='+ i.productId" target="_blank"> -->
                    <a @click="routeToPath('/product/'+ i.productId,'mallplus','new')">
                    <div class="item-pic">
                      <img class="maxs" :src="URL.PIC+i.productUrl" :alt="i.productName">
                    </div>
                    <div class="item-title">
                      {{ i.productName }}
                    </div>
                    <div class="item-price">
                      ￥{{ i.productPrice }}
                    </div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="rolls-brand">
              <ul>
                <li v-for="(i,index) in data.brandList" v-if="index<8">
                  <a :href="i.brandParamUrl" target="_blank">
                    <img :src="URL.PIC+i.brandImgUrl">
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
      </div>

      <!-- <scrollactive :offset="100" class="roll-nav" v-show="scrollNav" v-on:itemchanged="onItemChanged">
        <a href="#rolls1" class="scrollactive-item">五金</br>工具</a>
        <a href="#rolls2" class="scrollactive-item">五金</br>耗材</a>
        <a href="#rolls3" class="scrollactive-item">劳动</br>保护</a>
        <a href="#like" class="scrollactive-item">猜你</br>喜欢</a>
<!--      </scrollactive> &ndash;&gt; <RollItem :params="rollsParams1" id="rolls1" />-->
<!--      <RollItem :params="rollsParams1" id="rolls1" />-->
<!--      <RollItem :params="rollsParams2" id="rolls2" />-->
<!--      <RollItem :params="rollsParams3" id="rolls3" />-->
      <!-- <Advert /> -->
      <LikeItem id="like" />
    </div>
    <Footbars />
  </div>
</template>

<script>
import Headbar from '~/components/Layouts/Headbar'
import HeadMenu from '~/components/Layouts/HeadMenu'
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import Swiper from './home/components/Swiper'
import Channel from './home/components/Channel'
import Xlist from './home/components/Xlist'

import RollItem from './home/components/RollItem'
import LikeItem from '@/components/Business/LikeItem'

import indexClassifyImg from '@/jsons/index-classify-img'

import Vue from 'vue'
import VueScrollactive from 'vue-scrollactive'
Vue.use(VueScrollactive);
// import indexRolls from '@/jsons/indexRolls'
import {getCategroyList} from '@/api/category'
import {floorList} from '@/api/motif'
import {getMarketHotList} from '@/api/market'
import config from '@/seo/config'
export default {
  name: 'home',
  components: {
    Headbar,
    HeadMenu,
    Hungbar,
    Footbars,
    Swiper,
    Channel,
    RollItem,
    LikeItem,
    Xlist,
  },
  data() {
    return {
      visible: false,
      interval: null,
      visibilityHeight: 0,
      scrollNav: false,
      count:0,
      // rollsParams1: indexRolls.rollsParams1,
      // rollsParams2: indexRolls.rollsParams2,
      // rollsParams3: indexRolls.rollsParams3,
      list:[],
      floorlist:[],
      indexClassifyImg: indexClassifyImg,
      showClassify: false,
      classIdx: 0,
      classifyIndex: 0,
      marketList:[],
      ackMarketList:[],
    }
  },
  created(){
   // this.getCategroyList();
    this.floorList();
   // this.getMarketHotList();
  },
  head: config.home,
  async asyncData ({ app, query }) {

     let [res1, res2, res3, res4] = await Promise.all([
       app.$axios.get('/extend/content/list?positionCode=index_banner&device=pc'),
       app.$axios.get('/category/front/app_list'),
       app.$axios.get('/category-product/category_find_product_pc/select_categorys'),
       app.$axios.get('/markets/hot/list?positionCode=index_markets')
     ])
     let classifys = []
     for(var i = 0;i < res2.data.data.length; i += 2){
        classifys.push(res2.data.data.slice(i, i + 2));
     }

      let marketList = []
      res4.data.data.forEach((item,index)=>{
        if(index<4){
          marketList.push(item);
        }
      });
     return {
       swipers: res1.data.data,
       classifys: classifys,
       list: res3.data.data.list,
       ackMarketList: marketList
     }
  },
  methods: {
    //精选市场
    // getMarketHotList(){
    //   getMarketHotList({positionCode:'index_markets'}).then(res=>{
    //     this.marketList = res.data;
        

    //     this.marketList.forEach((item,index)=>{
    //       if(index<4){
    //         this.ackMarketList.push(item);
    //       }
    //     });
    //   });
    // },
    clickClassifyList(value, item) {
      // if(item.target.code == 'search_category' && item.target.params){
      //   var myCategoryIds = item.target.params.categoryIds.join(',')
      //   return this.URL.mall+'/search/product?categoryIds='+myCategoryIds+'&categoryNames='+value
      // }else{
      //   return this.URL.mall+'/search/product?kw='+value
      // }
    },
    // 鼠标移入分类
    classifyOver(item, classifyIndex,isBool) {
      this.showClassify = true;
      this.classifyIndex = classifyIndex;
      if(!isBool){
        if(item!=null && item!=undefined){
          if(item !== 'no'){
            this.classIdx = [];
            item.forEach((res,index)=>{
              if(index>11){
                res.forEach(obj=>{
                  this.classIdx.push(obj);
                });
              }
            });
          }
        }
      }else{
        if(item !== 'no'){
          this.classIdx = item;
        }
      }
    },
    classifyLeftOut() {
      // this.classifyIndex = -1
    },
    // 鼠标移出分类
    classifyOut(item, classifyIndex,isBool) {
      this.showClassify = false;
      this.classifyIndex = classifyIndex;
      if(!isBool){
        if(item!=null && item!=undefined){
          if(item !== 'no'){
            this.classIdx = [];
            item.forEach((res,index)=>{
              if(index>11){
                res.forEach(obj=>{
                  this.classIdx.push(obj);
                });
              }
            });
          }
        }
      }else{
        if(item !== 'no'){
          this.classIdx = item;
        }
      }
    },
    onItemChanged() {

    },
    //获取品类楼层
    getCategroyList(){
      getCategroyList({page:1,size:100}).then(res=>{
        this.list = res.data.list;
      });
    },
    //获取活动楼层主题
    floorList(){
      floorList().then(res=>{
        this.floorlist = res.data;
        if(res.data && res.data.length > 0){
          let len = res.data[0].motifPromotions.length;
          if(len>0){
            this.count = parseInt(len/2);
          }
          if(res.data[0].motifPromotions.length%2!=0){
            this.count ++;
          }
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
  .roll-nav{
    position: fixed;
    z-index: 999;
    top: 27%;
    margin-left: -80px;
    border: 1px solid #EEEEEE;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    a{
      border-top: 1px solid #EEEEEE;
      display: block;
      height: 34px;
      width: 58px;
      padding: 12px 0;
      letter-spacing: 2px;
      cursor: pointer;
      text-decoration: none;
    }
    a:nth-child(1){
      border: none;
    }
    .is-active{
      background-color: #255B8B;
      color: #fff;
    }
  }
.rolls-head{
  position: relative;
  h3{
    font-size: 30px;
    color: #333;
    text-align: center;
    font-weight: 500;
    padding-bottom: 0;
    margin-bottom: 12px;
  }
  p{
    color: #999999;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 0px;
  }
  .new-items{
    position: absolute;
    right: 0;
    bottom: 0;
    color: #999999;
    cursor: pointer;
  }
}

.motif-content{
  text-align: center;
  width: 440px;
  height: 100px;
  position: absolute;
  cursor: pointer;
  background: rgba(134,153,167,1);
  opacity: 0.8;
  z-index: 999;
  margin-top: 50px;
  margin-left: 6.2%;
  color: #FFFFFF;
  p{
    font-size: 20px;
  }
  span{
    font-size: 14px;
  }
}
   .motif-lt{
     width: 590px;
     height: 200px;
     border-radius: 10px;
     float: left;
     overflow: hidden;
     img{
       width: 100%;
       height: 200px;
     }
   }

   .motif-rt{
     width: 590px;
     height: 200px;
     border-radius: 10px;
     float: right;
     overflow: hidden;
     img{
       width: 100%;
       height: 200px;
     }
   }

   .rolls-main{
    height: 610px;
    .rolls-left{
      padding: 60px 20px 50px 20px;
      background-color: #CDD4DA;
      height: 500px;
      width: 240px;
      border-radius: 10px;
      text-align: center;
      .rolls-title{
        h3{
          font-size: 30px;
          margin-top: 0;
          margin-bottom: 9px;
          font-weight: 500;
        }
        p{
          color: #888888;
          font-size: 16px;
          margin-top: 0;
          text-transform: uppercase;
          margin-bottom: 20px;
        }
      }
      .rolls-tags{
        margin-top: 30px;
        li{
          width: 110px;
          background-color: #4D738A;
          border-radius: 30px;
          color: #fff;
          line-height: 32px;
          float: left;
          margin-left: 20px;
          margin-bottom: 20px;
          transition: all 0.3s;
          font-size: 12px;
          cursor: pointer;
          a{
            color: #fff;
            text-decoration: none;
          }
        }
        li:nth-child(odd){
          margin-left: 0;
        }
      }
    }
    .rolls-right{
      width: 920px;
      height: 620px;
      .rolls-item{
        background-color: #fff;
        padding: 10px;
        border-radius: 10px;
        width: 200px;
        height: 280px;
        float: left;
        margin-left: 10px;
        margin-bottom: 10px;
        padding-bottom: 10px;
        cursor: pointer;
        transition: all 0.4s;
        a{
          text-decoration: none;
        }
        &:hover{
          box-shadow: 0 12px 36px rgba(0,0,0,0.1)
        }
        .item-pic{
          height: 200px;
          overflow: hidden;
          margin-bottom: 8px;
          // border-radius: 10px;
        }
        .item-title{
          font-size: 14px;
          color: #333;
          padding-left: 10px;
          padding-right: 10px;
          line-height: 20px;
          display: -webkit-box;
          text-align: center;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: 40px;
          letter-spacing: 1px;
        }
        .item-price{
          text-align: center;
          color: #D0021B;
          margin-top: 10px;
        }
      }
    }
  }
  .rolls-brand{
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    padding-left: 30px;
    padding-right: 30px;
    li{
      border: 1px solid #eee;
      text-align: center;
      // height: 48px;
      // width: 118px;
      float: left;
      margin: 15px 0;
      transition: all 0.4s;
      cursor: pointer;
      // margin-left: 25px;
      margin-right: 46px;
      &:hover{
        box-shadow: 0 12px 36px rgba(0,0,0,0.1)
      }
      &:last-child{
        margin-right: 0;
      }
      img{
        vertical-align: middle;
        width: 100px;
        height: 45px;
      }
    }
    li:nth-child(1){
      margin-left: 0;
    }
  }
  .home-rolls{
    margin-bottom: 30px;
  }
  .rolls-image{
    img{
      width: 220px;
      height: 220px;
    }
  }

  .yh-layout-box-market-qh{
    position: absolute;
    right: -6px;
    width: 50px;
    height: 13px;
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #999999;
    cursor: pointer;
    text-decoration: none;
    &:hover{
      color: #255b8b;
      cursor: pointer;
    }
  }
  .yh-layout-box-market{
    width:290px;
    height:385px;
    background:rgba(233,233,233,1);
    border-radius:10px 10px;
    float: left;
    text-align: center;
    cursor: pointer;
    p{
      height: 14px;
      font-size: 14px;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: rgba(136,136,136,1);
    }

    a{
      display: block;
      position: relative;
      transition: all .3s;
      &:hover .market-btn{
        width: 120px;
        height: 120px;
        margin-left: -60px;
        margin-top: -60px;
      }
    }
    .market-btn{
      background: rgba(255,255,255,.4);
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0px;
      height: 0px;
      margin-left: 0px;
      margin-top: 0px;
      border-radius: 50%;
      text-align: center;
      line-height: 120px;
      overflow: hidden;
      transition: all .3s;
      color: #fff;
      font-size: 24px;
      box-shadow: 4px -40px 60px 5px rgba(26, 117, 206, 0.15) inset
    }

    .yh-layout-box-market-img{
      width:210px;
      height:210px;
      border-radius:6px;
    }

    .yh-layout-box-market-tags{
      height: 30px;
      .yh-layout-box-market-tag{
        width:30px;
        height:18px;
        border-radius:4px;
        padding: 5px;
        color: #fff;
      }
      .tags1{background: #6991cd;}
      .tags2{background: #69CDCC;margin-left: 5px;}
      .tags3{background: #4699E0;margin-left: 5px;}
    }

  }

  .yh-layout-box-market:nth-child(n+2){
    margin-left: 12px;
  }

</style>
<style lang="scss">
  .rolls1 .rolls-main .rolls-left{
    background-color: #CDD4DA
  }
  .rolls2 .rolls-main .rolls-left{
    background-color: #BAD0C8
  }
  .rolls3 .rolls-main .rolls-left{
    background-color: #D7D2C3;
  }

  .rolls1 .rolls-main .rolls-left .rolls-tags li{
    background-color: #4D738A;
  }
  .rolls2 .rolls-main .rolls-left .rolls-tags li{
    background-color: #6CA38F;
  }
  .rolls3 .rolls-main .rolls-left .rolls-tags li{
    background-color: #97885B;
  }

  .rolls1 .rolls-main .rolls-left .rolls-tags li:hover{
    background-color: #35637F;
  }
  .rolls2 .rolls-main .rolls-left .rolls-tags li:hover{
    background-color: #4B8E75;
  }
  .rolls3 .rolls-main .rolls-left .rolls-tags li:hover{
    background-color: #87743B;
  }
  .motif-carousel{
    .el-carousel__arrow--left{
      left:0px;
      width:30px;
      height:60px;
      border-radius:0px 10px 10px 0px;
      background: #999999;
      opacity: 0.3;
      .el-icon-arrow-left{
        font-size: 30px;
      }
    }

    .el-carousel__arrow--right{
      right:0px;
      width:30px;
      height:60px;
      border-radius:10px 0px 0px 10px;
      background:  #999999;
      opacity: 0.3;
      .el-icon-arrow-right{
        font-size: 30px;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .swiper{
    position: relative;
    overflow: hidden;
    min-width: 1300px;
    .swiper-bg{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      img{
        vertical-align: bottom;
      }
    }
    .home-classify{
      position: absolute;
      top: 20px;
      left: 50%;
      margin-left: -600px;
      width:200px;
      height:470px;
      background:rgba(240,240,240,1);
      box-shadow: 0 2px 26px rgba(0,0,0,0.07);
      z-index: 11;

      .classify-left{
        position: relative;
        ul{
          height: 476px;
          overflow: hidden;
        }
        .pop-classify{
          &::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色，还可以设置边框属性
            background-color:#f8f8f8;
          }
          &::-webkit-scrollbar {//滚动条的宽度
            width:0px;
            height:9px;
          }
          &::-webkit-scrollbar-thumb {//滚动条的设置
            background-color:#dddddd;
            background-clip:padding-box;
            min-height:28px;
          }
          &::-webkit-scrollbar-thumb:hover {
            background-color:#bbb;
          }

          position: absolute;
          top: 0px;
          left: 200px;
          width: 500px;
          height: 450px;
          padding: 10px 30px;
          background-color: #fff;
          border-radius: 0 10px 10px 0;
          z-index: 11;
          overflow-y: scroll;

          .pop-classify-wrap{
            position: relative;
            height: 100%;
            .indexClassifyImg{
              position: absolute;
              width: 460px;
              height: 100px;
              bottom: 30px;
              left: 10px;
              text-align: center;
              .indexClassifyImg-item{
                display: inline-block;
              }
              .indexClassifyImg-item:nth-child(2){
                margin-left: 40px;
              }
            }
          }

          .pop-title{
            margin-top: 5px;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            a{
              color: #333;
              transition: all 0.3s;
              text-decoration: none;
              font-family:PingFang-SC-Regular;
              font-weight:400;
              display: inline-block;
              position: relative;
              &:hover{
                color: #255B8B
              }
              &:before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 30%;
                background: #95CEFF;
                opacity: 0.4;
              }
            }
          }
          .pop-tags{
            margin-top: 10px;
            span{
              display: inline-block;
              margin-right: 20px;
              line-height: 28px;
              cursor: pointer;
              font-size: 14px;
              color: #888888;
              a{
                color: #888888;
                transition: all 0.3s;
                text-decoration: none;
                &:hover{
                  color: #255B8B
                }
              }
            }
            // span:nth-child(1){
            //   margin-left: 0;
            // }
          }
        }
      }
      .classify-item:nth-child(13){margin-bottom: 14px;}
      .classify-item{
        margin-top: 5px;
        .category-title {
          border-color: #fff;
          color: #000;
          height: 34px;
          line-height: 34px;
          width: 100%;
        }
        &:hover {
          .category-title{
            background-color: #fff;
            position: relative;
            z-index: 2;
            height: 34px;
          }
        }
        .category-subtitle{
          span{
            color: #555;
          }
        }

        span{
          cursor: pointer;
        }
        .category-title{
          padding: 0 20px;
          span{
            color: #333333;
            margin-right: 10px;
            font-size: 14px;
            a{
              color: #333;
              transition: all 0.3s;
              text-decoration: none;
              font-size: 14px;
              font-family: PingFang-SC-Regular;
              font-weight: 400;
              &:hover{
                color: #255B8B
              }
            }
          }
        }
        .category-subtitle{
          margin: 0 30px;
          width: 180px;
          overflow: hidden;
          height: 20px;
          line-height: 20px;
          text-overflow: clip;
          span{
            color: #888888;
            margin-right: 10px;
            font-size: 12px;
            display: inline-block;
            a{
              color: #888888;
              transition: all 0.3s;
              text-decoration: none;
              &:hover{
                color: #255B8B
              }
            }
          }
        }
      }
      .classify-item.classify-item-active{
        background-color: #fff;
        position: relative;
        z-index: 2;
        .category-title{
          border-color: #fff;
          color: #000;
        }
        .category-subtitle{
          span{
            color: #555;
          }
        }
      }

      .pop-class-content:nth-child(n+2){
        margin-top: 30px;
      }

      .classify-item:nth-child(1) .category-title{
        border-top: none;
      }

      .hung-tab-wrap{
        position: absolute;
        top: -20px;
        left: -45px;
        z-index: 10;
        .hung-line{
          width: 1px;
          height: 20px;
          background: #255B8B;
          margin-left: 10px;
        }
        .hung-enter-text{
          width: 22px;
          height: 100px;
          background: #255B8B;
          color: #fff;
          font-size: 14px;
          padding-top: 15px;
          text-align: center;
          border-radius: 11px;
        }
      }
    }
  }
</style>

<style lang="scss">
  .home-swiper{

    .el-carousel__indicators{
      bottom: 90px;
      z-index: 3;
      .el-carousel__button{
        height: 4px;
      }
    }
    .el-carousel__arrow--left{
      left: 50%;
      margin-left: -340px;
    }
    .el-carousel__arrow{
      height: 54px;
      width: 54px;
      font-size: 22px;
    }
    .el-carousel__arrow--right{
      right: 50%;
      margin-right: -600px;
    }
    .home-swiper-item{
      background-size: cover;
      background-position: center;
    }
  }
  .swipers1 .el-carousel__indicators, .swipers1 .el-carousel__arrow{
    display: none;
  }
</style>
